<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			#d1{margin:100px 0;height:500px;background: url(jsChapter09/bdqn/reg-mobile.jpg) no-repeat;
			padding: 40px;}
			#d1-1{width: 900px;margin:0 auto;}
			#zhuce{background-color:white ;}
			#zhuce:after{content: '';clear: both;display: block;}
            #d1 ul{list-style: none;}
            #d1 ul li{color:white;background-color: #2361B4 ;padding: 10px 30px;margin-right:5px ;}
            #d1 ul li:last-of-type{background-color:white ;color: #2361B4; }
            #d1 #d1-1 #xuanze li {float: left;}
            #zhuce {clear: both;font-size: 12px;color: #C6C6C6;}
           #left,#right{float:left;padding: 40px;}
           #left{border-right:1px #C6C6C6 dashed ;}
           #left div{margin: 15px 10px;position: relative;}
           #left .img{position: absolute;top: 13px; left: 10px;}
           #d1_3 a{margin-top:0px ;border: 1px #999999 solid;display: inline-block;height: 36px;}
         
           input{padding: 10px 30px;}
           #d1_6 input{color: white;background-color:#55ABE8 ;border: 1px #55ABE8 solid;margin-left: 100px;border-radius:10px ;padding: 10px 70px;}
           #d1_5{padding-left:100px ;}
          
        #right a{
        	display: inline-block;padding: 10px 40px;background-color:#55ABE8 ;color: white;text-decoration: none;font-size: 14px;font-weight: bolder;border-radius:10px ;
        }
        span{color: red;}
		</style>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
		<script type="text/javascript">
				$.validator.setDefaults({
    			submitHandler: function() {
      				alert("提交事件!");
   				}
			});
			//自定义验证
			jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = "gaae";
return value==tel;
}, "请填写正确的验证码");
			$().ready(function(){
				$("#form").validate({
					//改变错误提示的位置
					errorPlacement: function(error, element) { 
						error.appendTo(element.next().next()); 
					},
		errorElement: "span",
					//规则
					rules:{
						email:{
							required: true,
        					email: true
						},
						name:{
							required: true,
							maxlength:12,
							minlength:4
							
						},
						pass:{
							required: true,
							maxlength:16,
							minlength: 6
						},
						rpass:{
							required: true,
							maxlength:16,
							
							minlength: 6,
							equalTo: "#pass"
						},
						yzm:{

							required: true,
							maxlength:4,
							minlength:4,
							isZipCode:true
							
						}
					},
					messages:{
						email:"请输入一个正确的邮箱!",
						name:{
							required: "请输入用户名!",
							maxlength:"用户名最多由12个字符组成!",
							minlength: "用户名最少由4个字符组成!"
						},
						pass:{
							required:  "请输入密码!",
							maxlength:"密码最多由16个字符组成!",
							
							minlength: "密码长度不能小于 6 个字符!"
							
						},
						rpass:{
							required:  "请输入密码!",
							maxlength:"密码最多由16个字符组成!",
							
							minlength: "密码长度不能小于 6 个字符!",
							equalTo: "两次密码输入不一致!"
						},
						yzm:{

							required: "请输入验证码!",
							maxlength:"验证码长度不能大于 4个字母!",
							minlength: "验证码长度不能小于 4个字母!",
							isZipCode:"请填写正确的验证码"
							
						}
					}
				});
				
			});
			
		</script>
	</head>

	<body>
		<section>
			<div id="d1">
				<div id="d1-1">
					<ul id="xuanze">
						<li>手机注册</li>
						<li>邮箱注册</li>
					</ul>
					<div id="zhuce">
						<!--注册左侧-->
						<div id="left">
							<form action="http://bdqn.cn" method="post" id="form">
									<div id="d1_1">
									<input type="email" name="email" placeholder="请输入您的常用箱" id="email" size="30" /><img src="jsChapter09/bdqn/login-input5.png" class="img"/>
									<span id="span1"></span>

								</div>
								<div id="d1_2">
									<input type="text" name="name" placeholder="请输入昵称" id="name"  size="30" /><img src="jsChapter09/bdqn/login-input1.png" class="img"/>
									<span id="s1">
</span>

								</div>
								<div id="d1_0">
									<input type="password" name="pass" placeholder="请输入密码" id="pass" size="30" /><img src="jsChapter09/bdqn/login-input2.png" class="img"/>
									<span ></span>

								</div>
											<div id="d1_4">
										<input type="password" name="rpass" placeholder="请再次输入密码" id="rpass" size="30"  /><img src="jsChapter09/bdqn/login-input2.png" class="img"/>
										<span "></span>
									</div>
								<div id="d1_3">
									<input type="text" name="yzm" placeholder="请输入右侧验证码" id="yzm"  size="15" />
								<a href="#"><img src="jsChapter09/bdqn/59a11fa7365d1.png" height="25px" width="70px"/>	</a><span></span><img src="jsChapter09/bdqn/login-input3.png" class="img"/></div>

								<div id="d1_5">
									<input type="checkbox" class="agreeCheck" id="agree" checked/> 同意
									<a href="#">用户服务条款</a>
								</div>

								<div id="d1_6">
									<input type="submit" value="注册" />
								</div>
							</form>

						</div>
						<!--注册右侧-->
						<div id="right">
							<a href="#">已有帐号，马上登录</a>
						</div>
					
					</div>
				</div>

		</section>
	</body>

</html>